<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #root {
            background-color: #1e7e1e;
            padding-top: 20px;
            width: 500px;
            height: 600px;
            text-align: center;
        }
        
        .ban {
            width: 500px;
            height: 200px;
            background-color: #957dff;
            display: block;
            position: relative;
        }
        
        .ban1,
        .ban2 {
            width: 500px;
            height: 100px;
            display: block;
            color: white;
            font-size: 30px;
            border-radius: 20px;
            border: yellowgreen, 2px solid;
            background-color: #8b79db;
        }
        
        .shan {
            position: absolute;
            display: block;
            width: 50px;
            height: 20px;
            bottom: 20px;
            right: 20px;
            background-color: rgb(251, 89, 83);
        }
    </style>
</head>

<body>
    <div id="root">
        <input type="text" name="" id="min" value="" />留言姓名<br>
        <textarea id="nei" name="" rows="" cols=""></textarea>
        <button id="liu">留言</button>
        <div class="bna3"></div>

    </div>

</body>

</html>
<script type="text/javascript">
    liu.onclick = function() {
        var min = document.querySelector('#min');
        var min1 = min.value;
        var nei = document.querySelector('#nei');
        var nei1 = nei.value;
        var root = document.querySelector("#root");
        var ban3 = document.querySelector(".bna3");
        console.log(ban3);

        // 创建节点
        var ban = document.createElement('ban');
        var ban1 = document.createElement('ban1');
        var ban2 = document.createElement('ban2');
        var shan = document.createElement("shan")
        ban.className = "ban";
        ban1.className = "ban1";
        ban2.className = "ban2";
        shan.className = "shan";


        ban1.innerText = min1;
        ban2.innerText = nei1;
        shan.innerHTML = "删除";

        console.log(min1);
        console.log(nei1);
        console.log(root);

        // root.appendChild(ban3);
        ban3.insertBefore(ban, ban3.firstChild);
        ban.appendChild(ban1);
        ban.appendChild(ban2);
        ban.appendChild(shan);
        shan.onclick = function() {
            ban.remove();
        }

    }
</script>